@charset "utf-8" ;
@function r($px)
{
    @return $px/40*1rem    
}
.About_us_web
{
    width:100%;
    overflow: hidden;
    margin-top: 3.5%;
    @media only screen and (max-width:768px)
    {
        .head
        {
            margin-bottom: 12.4%;
        }    
    }
    .middle_pic
    {
        width:100%;
        padding-top:19%;
        height: 0;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        img
        {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100%;
            transform: translate(-50%,-50%);
            transform-origin:center,center;   
        }
    }
    @media only screen and (max-width:768px)
    {
        .middle_pic
        {
            width:100%;
            padding-top:38.5%;
            height: 0;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            img
            {
                position: absolute;
                left: 62%;
                top: 50%;
                width: 200%;
                transform: translate(-50%,-50%);
                transform-origin:center,center;   
            }
        }
    }
    .middle
    {
        position: relative;
        .middle_picture
        {
            position: absolute;
            bottom: 10%;
            right: 5%;
            img
            {
                width: 100%;
            }
        }
        width:70%;
        margin: auto;
        .col-md-12
        {
            h1
            {
                margin-bottom: 3%;
                margin-top: 5%;
            }
        }
        .col-md-7
        {
            h4
            {
                margin-bottom: 10%;
            }
            .text
            {
                text-indent: 32px;
                margin-bottom: 5%;
            }
            .text2
            {
                text-indent: 32px;
                margin-bottom: 10%;
            }
        }
    }
    @media only screen and (max-width:768px)
    {
        .middle
        {
            position: relative;
            .middle_picture
            {
                position: absolute;
                top: 75%;
                right: 5%;
                img
                {
                    width: 104.5%;
                }
            }
            width:90%;
            margin: auto;
            .col-md-12
            {
                h1
                {
                    margin-bottom: 5%;
                    margin-top: 30%;
                }
                
            }
            .col-md-7
            {
                h4
                {
                    margin-bottom: 10%;
                }
                .text
                {
                    text-indent: 32px;
                    margin-bottom: 10%;
                }
                .text2
                {
                    text-indent: 32px;
                    margin-bottom: 70%;
                }
                
            }
        }
    }
    .middle2
    {
        width: 100%;
        height: r(406);
        background: #8cc11f;
        .middle_text
        {
            width: 70%;
            margin: auto;
            .row
            {
                padding-top: 12%;
                color: #ffffff;
                .col-md-12,.col-xs-12
                {
                    h1
                    {
                        padding-bottom: 4%;
                    }
                      
                }
                .col-md-7
                {
                    h5
                    {
                        line-height: 32px;
                    }
                }
                .col-md-5
                {
                    .text
                    {
                        line-height: 32px;
                        padding-left: 4%;
                    }
                    .col-md-12,.col-xs-12
                    {
                        .ipt
                        {
                            width: r(210);
                            height: R(50);
                            background: #ffffff;
                            border-radius: 5px;
                            display: block;
                            text-align: center;
                            padding: 0;
                            a
                            {
                                color: #8cc11f;
                                text-align: center;
                                line-height: 25px;
                            }
                        }
                        div
                        {
                            h5
                            {
                                line-height: 32px;
                            }
                        }
                    }
                }
            }
        }
    }
    @media only screen and (max-width:768px)
    {
        .middle2
        {
            margin-top: 10%;
            width: 100%;
            height: r(1300);
            background: #8cc11f;
            .middle_text
            {
                width: 88%;
                margin: auto;
                .row
                {
                    padding-top: 12%;
                    color: #ffffff;
                    .col-md-12,.col-xs-12
                    {
                        h1
                        {
                            padding-bottom: 4%;
                        }
                          
                    }
                    .col-md-7
                    {
                        h5
                        {
                            line-height: 32px;
                        }
                    }
                    .col-md-5
                    {
                        .text
                        {
                            line-height: 32px;
                            padding-top: 10%;
                        }
                        .col-md-12,.col-xs-12
                        {
                            padding: 0;
                            .ipt
                            {
                                width: r(610);
                                height: R(25);
                                background: #ffffff;
                                border-radius: 5px;
                                display: block;
                                text-align: center;
                                padding: 0;
                                margin-bottom: 5%;
                                a
                                {
                                    color: #8cc11f;
                                    text-align: center;
                                    line-height: 25px;
                                }
                            }
                            div
                            {
                                h5
                                {
                                    line-height: 32px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .middle3
    {
        width: 70%;
        margin: auto;
        margin-top: 12%;
        .col-md-12,.col-xs-12
        {
            h2
            {
                padding-bottom: 3.5%;
                color: #8cc11f;
            }
            .text
            {
                dl
                {
                    dt
                    {
                        padding-bottom: 1%;
                    }
                    dd
                    {
                        padding-bottom: 0.5%;
                        padding-left: 32px;
                    }
                }
            }
            .text2
            {
                hr
                {
                    border: 1px solid #d2d2d2;
                    margin-top: 5%;
                }
            }
            
        }
    }
    .middle4
    {
        width: 70%;
        margin: auto;
        margin-top: 3%;
        .col-md-12,.col-xs-12
        {
            h2
            {
                padding-bottom: 3.5%;
                color: #8cc11f;
            }
            .text
            {
                dl
                {
                    dt
                    {
                        padding-bottom: 1%;
                    }
                    dd
                    {
                        padding-bottom: 0.5%;
                        padding-left: 32px;
                    }
                }
            }
            .text2
            {
                hr
                {
                    border: 1px solid #d2d2d2;
                    margin-top: 5%;
                }
            }
            .text3
            {
                margin-bottom: 10%;
                dl
                {
                    dt
                    {
                        padding-bottom: 1%;
                    }
                    dd
                    {
                        padding-bottom: 0.5%;
                        padding-left: 32px;
                    }
                }
            }
            
        }
    }
    @media only screen and (max-width:768px)
    {
        .middle3,.middle4
        {
            width: 88%;
            margin: auto;
            margin-top: 12%;
            .col-md-12,.col-xs-12
            {
                h2
                {
                    padding-bottom: 3.5%;
                    color: #8cc11f;
                }
                .text
                {
                    dl
                    {
                        dt
                        {
                            padding-bottom: 1%;
                        }
                        dd
                        {
                            padding-bottom: 0.2%;
                            padding-left: 32px;
                            margin-bottom: 4%;
                        }
                    }
                }
                .text2
                {
                    hr
                    {
                        border: 1px solid #d2d2d2;
                        margin-top: 10%;
                    }
                }
                .text3
                {
                    margin-bottom:35%;
                    dl
                    {
                        dt
                        {
                            padding-bottom: 1%;
                        }
                        dd
                        {
                            padding-bottom: 0.2%;
                            padding-left: 32px;
                            margin-bottom: 4%;
                        }
                    }
                }
            }
        }
    }
    .middle5
    {
        width: 100%;
        margin: auto;
        height: r(405);
        background: #f4f4f4;
        .middle
        {
            width:70%;
            margin: auto;
            padding-top: r(45);
            .col-md-12
            {
                h2
                {
                    padding-bottom:r(20);
                }    
            }
            .box
            {
                width: r(470);
                height: r(100);
                border: 1px solid #e3e3e3;
                margin: r(15); 
                background: #ffffff;
                border-radius: 5px;
                div
                {
                    display: inline-block;
                    padding-top:r(11);    
                }

            }
        }
        
    }
    @media only screen and (max-width:768px)
    {
        .middle5
        {
            width: 100%;
            margin: auto;
            height: r(1500);
            background: #f4f4f4;
            .middle
            {
                width:88%;
                margin: auto;
                padding-top: r(150);
                .col-md-12
                {
                    h2
                    {
                        padding-bottom:r(60);
                    }    
                }
                .box
                {
                    width: r(1000);
                    height: r(230);
                    border: 1px solid #e3e3e3;
                    margin: r(15); 
                    background: #ffffff;
                    border-radius: 5px;
                    div
                    {
                        display: inline-block;
                        padding-top:r(20);
                    }
                    .pic
                    {
                        img
                        {
                            width: 75%;
                        }
                    }
                    .text
                    {
                        width: 60%;
                        p
                        {
                            white-space:nowrap;
                            overflow: hidden;
                            text-overflow:ellipsis; 
                        }
                    }
                    
    
                }
            }
            
        }
    }
    .foot
    {
        width: 100%;
        background: #3b3b3b;
        padding-top: 3%;
        padding-bottom: 3%;
        .inside_foot
        {
            
            width: 80%;
            margin: auto;
            background: #3b3b3b;
            .col-md-6,.col-xs-4
            {
                color: #a1a3ab;
                .col-md-2,.col-xs-3
                {
                    padding: 0;
                    
                }
            }
            
              
        } 
    }
    @media only screen and (max-width:768px)
    {
        .foot
        {
            width: 100%;
            background: #3b3b3b;
            padding-top: 3%;
            padding-bottom: 3%;
            .inside_foot
            {
                width: 95%;
                margin: auto;
                background: #3b3b3b;
                font-size:xx-small ;
                padding: 0;
                .col-md-6,.col-xs-4
                {
                    color: #a1a3ab;
                    padding-top: 10px;
                    padding-bottom: 5px;
                    .col-md-2,.col-xs-3
                    {
                        padding: 0;
                        
                    }    
                }
            } 
        }    
    }
}
